<template>
	<view class="user-date">
    <view class="userInfo flexR">
      <view  v-if="binded" class="hasCard">
        <view class="flexR">
          <img class="header" src="../../static/images/bg-header/user_header_squ.png" alt="">
          <view class="user">
            <view class="info">
              <text class="name">{{userInfo.name}}</text>
              <!-- <text>{{userInfo.sex == 1 ? '女' : '男'}}</text>
              <text>{{new Date().getFullYear() - userInfo.idCard.substring(6, 10)}}</text> -->
              <text class="ele-card">电子健康卡</text>
            </view>
            <view class="pat-card">
              <text class="name">门诊号：{{userInfo.cardNo}}</text>
              <!-- <text class="check-card" @click="showUserList = true">切换就诊人</text> -->
            </view>
          </view>
        </view>
        
        <view class="qr" @click="showUserList = true">
          <image class="img" src="../../static/images/icon/change_user.png" mode=""></image>
          <text class="qr-txt">切换就诊人</text>
        </view>
      </view>
      <view v-else class="noCard flexR" @click="toLogin">
      	<text class="iconfont icon-svg-"></text>
      	<text>绑定{{ cardText||'' }}</text>
      </view>
    </view>
    <view class="date" v-show="showDate">
      <view class="dropdown-right flexR" @click="handleMenu('date')" v-show="showDate">
      	<text>{{currDate}}</text>
      	<view class="uIcon" :style="{transform:dateIcon==='arrow-up-fill'?'rotate(180deg)':'rotate(0deg)',transition:'transform .3s'}">
      		<u-icon name="arrow-down-fill"></u-icon>
      	</view>
      </view>
    </view>
    
    <view class="menu-content">
    	<view v-show="dateIcon==='arrow-up-fill'" class="u-content-color u-border-top flexR" v-for="(item,i) in dateOptions" :key="item.label" @click="change(item,'date')">
    		<text :style="{color:item.checked?'#31CADF':''}">{{item.label}}</text>
    		<u-icon name="checkbox-mark" :color="item.checked?'#31CADF':'#FFF'"></u-icon>
    	</view>
    </view>
		<List v-show="showCode || showUserList" :showCode='showCode' :showUserList='showUserList' @close='onClose'></List>
	</view>
</template>
<script>
	var dayjs = require('dayjs')
	import { mapGetters } from 'vuex';
	import { getValue } from '@/common/js/common.js'
	import List from '@/components/UserInfo/list.vue'
	export default {
		components:{ List },
    props:{
    	color:{
    		type:String,
    		default:'#fff'
    	},
    	showDate:{
    		type:Boolean,
    		default:false
    	},
    	showUser:{
    		type:Boolean,
    		default:true
    	}
    },
		data() {
			return {
				showCode:false, // 是否展示二维码
				showUserList:false, // 是否展示用户切换列表
        dateIcon:'arrow-down-fill',
        currDate:'一周内',
        dateOptions:[
        	{
        		label:'一周内',
        		value:1,
        		type:'week',
        		number:1,
        		checked:true
        	},
        	{
        		label:'一月内',
        		value:2,
        		type:'month',
        		checked:false,
        		number:1
        	},
        	{
        		label:'半年内',
        		value:3,
        		type:'month',
        		checked:false,
        		number:6
        	},
        	{
        		label:'一年内',
        		value:4,
        		type:'year',
        		checked:false,
        		number:1
        	},
        	{
        		label:'不限时间',
        		value:5,
        		checked:false,
        		type:'all'
        	}
        ],
			}
		},
		computed:{
			...mapGetters(['userInfo', 'systemParams', 'userList']),
			userIcon(){
				if(this.userInfo.sex){
					return this.userInfo.sex==='女'?'icon-iconfontnvtouxiang':'icon-lianxirenxuanzhong'
				}else{
					return 'icon-lianxirenxuanzhong'
				}
			},
			cardText(){
				if(this.systemParams&&this.systemParams.length){
					if(getValue('SFQYDZJKK',this.systemParams)){
						let res = getValue('SFQYDZJKK',this.systemParams)
						return res === "0"?'就诊卡':'电子健康卡'
					}else{
						return ''
					}
				}else{
					return ''
				}
			},
			binded(){
				return this.userInfo.name?true:false;
			},
		},
		methods: {
			toLogin(){
				uni.navigateTo({
					// url:'/pages/Login/index'
					url:'/pages/Login/addPatient'
				})
			},
      handleMenu(type){
      	if(type === 'user'){
      		this.dateIcon = 'arrow-down-fill'
      		if(this.userIcon === 'arrow-up-fill'){
      			this.userIcon = 'arrow-down-fill'
      		}else{
      			this.userIcon = 'arrow-up-fill'
      		}
      	}else{
      		this.userIcon = 'arrow-down-fill'
      		if(this.dateIcon === 'arrow-up-fill'){
      			this.dateIcon = 'arrow-down-fill'
      		}else{
      			this.dateIcon = 'arrow-up-fill'
      		}
      	}
      },
      change(val,type){
      	if(type==='date'){
      		this.dateOptions.forEach(item => {
      			item.checked = item.value===val.value?true:false;
      		})
      		this.currDate = val.label
      		this.dateIcon = 'arrow-down-fill'
      		let params = {
      			endDate:'',
      			startDate:''
      		}
      		if(val.type==='all'){
      			params.startDate = '2017-01-01';
      		}else{
      			params.startDate = dayjs().subtract(val.number, val.type).format('YYYY-MM-DD');
      		}
      		params.endDate = dayjs().format('YYYY-MM-DD');
      		this.$emit('changeDate',params)
      	}else{
      		this.userIcon = 'arrow-down-fill'
      		let this_ = this;
      		this.changeUser(val.value).then(()=> {
      			this_.$emit('changeUser')
      		})
      	}
      },
			onClose(type){
				this[type] = false
			}
		}
	}
</script>

<style lang="scss" scoped>
  .user-date {
    width: 100vw;
    position: sticky;
    top: 0;
    left: -32upx;
    transform: translateY(-32upx);
    margin-left: -32upx;
    margin-right: -32upx;
    z-index: 9;
  }
	.userInfo{
    // background-color: $uni-bg-color;
		background: url(../../static/images/bg-header/user_top_back.png) no-repeat;
    background-size: 100% 100%;
		padding: 12rpx 20rpx;
		// border-radius: 6rpx;
		height: 136rpx;
		color: $text-color;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
    .header {
      width: 84upx;
      height: 84upx;
      margin-right: 20upx;
    }
		.hasCard{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
      .user {
        .info {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28upx;
          color: rgba(0,0,0,0.7);
          line-height: 44upx;
          .name {
            font-size: 28upx;
            margin-right: 16upx;
          }
          text {
            margin-right: 16upx;
          }
          .ele-card {
            padding: 4upx 12upx;
            background-color: $theme-color;
            border-radius: 40upx;
            color: #FFF;
            font-size: 24upx;
          }
        }
      }
      .pat-card {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28upx;
        color: rgba(0,0,0,0.7);
        line-height: 44upx;
        .check-card {
          padding: 4upx 12upx;
          border-radius: 32upx;
          border: 1px solid #FBFFFF;
          margin-left: 16upx;
        }
      }
			// .user{
			// 	text{
			// 		margin-left: 20rpx;
			// 	}
			// 	.iconfont{
			// 		font-size: 66rpx;
			// 		margin-left: 0;
			// 	}
			// 	display: flex;
			// 	flex-direction: row;
			// 	justify-content: flex-start;
			// 	align-items: center;
			// }
      .qr {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 56upx;
          height: 56upx;
          margin-bottom: 8upx;
        }
        .qr-txt {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24upx;
          color: #3E81F7;
        }
      }
			.card-code,.card-change-user{
				font-size: 32rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				text:first-child{
					color: $text-color-active;
					margin-right: 10rpx;
				}
			}
			
		}
		.noCard{
      width: 100%;
      height: 100%;
			justify-content: center;
			align-items: center;
      color: rgba(0,0,0,0.7);
			>.iconfont{
				font-size: 50rpx;
				color: $text-color-active;
				margin-right: 10rpx;
			}
		}
	}
  .date {
    // width: ;
    height: 64upx;
    line-height: 64upx;
    background-color: #FFF;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.7);
  }
  .menu-content{
  	z-index: 3;
  	position: absolute;
  	left: 0;
  	// top: 80rpx;
  	bottom: 0;
    transform: translateY(100%);
  	width: 100%;
  	background-color: #FFF;
  	box-shadow: 3px 3px 3px rgba($color: #000000, $alpha: .2);
  	>view{
  		height: 80rpx;
  		padding: 0 30rpx;
  		margin: 0 20rpx;
  		justify-content: space-between;
  		align-items: center;
  		>text{
  			line-height: 80rpx;
  		}
  	}
  }
  .dropdown-right {
    justify-content: flex-end;
    padding-right: 20%;
    .uIcon {
      font-size: 12upx;
      margin-left: 16upx;
      color: #D9D9D9;
    }
  }
</style>
